<div class="layuimini-main" id="access-search">
    <style>
        #admin-add label {
            width: 150px;
            background-color: #dddddd;
        }

        .defDivMainBox {
            width: 1280px;
            margin: 0 auto;
        }

        .defcenter {
            text-align: center;
        }

        .defDivImageBox {
            width: 240px;
            margin: 0 auto;
        }

        defImageBox {
            width: 240px;
            height: 340px;
            margin: 0 auto;
        }

        .status-black {
            margin-left: 10px;
            padding-left: 5px !important;
            padding-right: 5px !important;
            color: black;
        }


        .label_upload {
            color: #0034FF;
        }

        .label_wait {
            color: #8C7F12;
        }

        .label_delete {
            color: #DC143C;
        }

        .label_error {
            color: #FF5722;
            font-weight: bold;
        }
    </style>

    <div class="layui-form layuimini-form  layui-form-pane " lay-filter="access_edit_div_filter">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-panel">

                    <fieldset class="table-search-fieldset">
                        <legend> 人员信息</legend>
                        <div style="margin: 3px 3px 3px 3px">


                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">人员编号</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="employeeID" isStaus></div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">人员姓名</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="employeeName" isStaus></div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="employeePassword" isStaus></div>
                                    </div>
                                </div>

                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">职务</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="employeeJob" isStaus></div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">联系方式</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="employeePhone" isStaus></div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">卡号</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="employeeIC" isStaus></div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </fieldset>

                    <fieldset class="table-search-fieldset">
                        <legend> 设备身份</legend>
                        <div style="margin: 3px 3px 3px 3px">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label"> 设备SN</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="deviceID" isStaus></div>
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label"> 设备名称</label>
                                    <div class="layui-input-inline">                                        
                                        <div class="layui-form-mid status-black" name="deviceName" isStaus></div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </fieldset>
                    <fieldset class="table-search-fieldset">
                        <legend> 权限信息</legend>
                        <div style="margin: 3px 3px 3px 3px">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">角色</label>
                                    <div class="layui-input-inline">
                                        <select name="employeeRoot" lay-verify="required">
                                            <option value="0" selected>用户</option>
                                            <option value="1">管理员</option>
                                            <option value="2">黑名单</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label">开门时段</label>
                                    <div class="layui-input-inline">

                                        <select name="timeGroupID" lay-verify="">
                                            <option value="1" selected>时段1</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">有效期限制</label>
                                    <div class="layui-input-inline">
                                        <select name="devicePassTimeOver" lay-verify="">
                                            <option value="1" selected>受限制</option>
                                            <option value="0">无限制</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">起始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" maxlength="20" name="devicePassStart" lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">截至时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" maxlength="20" name="devicePassEnd" lay-verify="required" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">通行次数</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="devicePassNumber" name="devicePassNumber" required lay-verify="required" placeholder="0-65535  0表示已失效 65535表示无限制" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>


                    </fieldset>
                    <fieldset class="table-search-fieldset">
                        <legend>其他信息</legend>
                        <div style="margin: 3px 3px 3px 3px">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">上传状态</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid layui-word-aux">
                                            <span style="font-size: 18px;color: #333;" id="uploadStatus"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">上传时间</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="uploadTime" isStaus></div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">上传反馈</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid layui-word-aux">
                                            <span style="font-size: 14px;color: #333;" id="uploadResult"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">创建时间</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="createTime" isStaus></div>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">更新时间</label>
                                    <div class="layui-input-inline">
                                        <div class="layui-form-mid status-black" name="lastUpdatetime" isStaus></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                </div>
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div class="defDivImageBox layui-panel">
                        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                            <legend>人员照片</legend>
                            <div class="layui-form-item defImageBox defcenter" id="peopleImage">
                                <img class="defImageBox" id="showPeopleImg" src="/NoPIC.jpg" width="240">
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-row layui-col-space15">
            <div class="layui-panel defcenter">
                <button type="submit" class="layui-btn  data-add-btn" lay-submit lay-filter="data-save-btn"><i class="layui-icon">&#xe605;</i> 保存</button>
                <button type="submit" class="layui-btn layui-btn-danger  data-delete-btn" id="btnEditClose"><i class="layui-icon">&#x1006;</i> 取消</button>
            </div>
        </div>
    </div>

</div>
<script>

    layui.use(['form', 'laydate', 'table', 'faceAPI', 'slider'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;
        var faceAPI = layui.faceAPI;
        var slider = layui.slider;
        var laydate = layui.laydate;

        var TimeGroups = [];
        for (var i = 1; i < 65; i++) {
            var sItem = ' <option value="' + i + '" ';
            if (i == 1) sItem += ' selected';
            sItem += '> 时段' + i + '</option> ';
            TimeGroups.push(sItem);
        }
        $('[name=timeGroupID]').html(TimeGroups.join(''));

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();


        //执行一个laydate实例
        laydate.render({
            elem: '[name="devicePassStart"]', //指定元素
            type: 'datetime'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '[name="devicePassEnd"]', //指定元素
            type: 'datetime'
        });
        $('[name="devicePassStart"]').attr("value", dayjs().format("YYYY-MM-DD") + ' 00:00:00');
        $('[name="devicePassEnd"]').attr("value", dayjs().add(1, 'Year').format("YYYY-MM-DD") + ' 23:59:59');

        

        //渲染
        //var devicePassNumberValue = 0;
        //var sldevicePassNumber = slider.render({
        //    elem: '[name="devicePassNumber"]',  //绑定元素
        //    min: 0,
        //    max: 1000,
        //    value: 0,
        //    input: true,
        //    setTips: function (value) { //自定义提示文本
        //        if (value == 0) {
        //            return '无限制通讯次数';
        //        } else

        //            return value + '次';
        //    },
        //    change: function (data) {
        //        devicePassNumberValue = data;
        //    }

        //});


        //开始绑定字段值
        var oAccessDetail = faceAPI.AccessEditPage;
        form.val("access_edit_div_filter", oAccessDetail);
        ShowValue();
       // sldevicePassNumber.setValue(oAccessDetail.devicePassNumber);
        ShowPeopleImage();

        function ShowValue() {
            var frm = $('[lay-filter=access_edit_div_filter] div[isStaus]');
            frm.each((ind, em) => {
                var _em = $(em);
                var name = _em.attr("name");
                if (oAccessDetail.hasOwnProperty(name))
                    _em.html(oAccessDetail[name]);
            });
        }



        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        faceAPI.AccessEditPageResult = {};
        faceAPI.AccessEditPageResult.result = false;


        $('#btnEditClose').on('click', function () {
            faceAPI.AccessEditPageResult.result = false
            layer.close(parentIndex);
            return false;
        });
        var loadIndex = 0;
        loadIndex = layer.load(1, { shade: [0.6, '#e2e2e2'] }); //0.1透明度的白色背景

        //加载权限详情
        faceAPI.Ajax({
            type: 'Post',
            data: { accessID: oAccessDetail.accessID},
            url: '/api/DeviceAccess/GetAccessDetail',
            success: function (result) {
                layer.close(loadIndex);
                if (result.result == false) {
                    layer.alert(result.error, { icon: 2 });
                }
                else {
                    //刷新页面
                    oAccessDetail = result.content;
                    form.val("access_edit_div_filter", oAccessDetail);
                 //   sldevicePassNumber.setValue(oAccessDetail.devicePassNumber);
                    ShowValue();
                    ShowPeopleImage();
                    showUploadStatus();
                }

            }
        });
        

        var UploadStatusTable = [];
        UploadStatusTable[0] = '<span class="label label_wait">未上传</span>';
        UploadStatusTable[1] = '<span class="label label_upload">已上传</span>';
        UploadStatusTable[2] = '<span class="label label_delete">待删除</span>';

        var UploadResultTable = [];
        UploadResultTable[0] = "导入成功";
        UploadResultTable[1] = "人脸被拒绝";
        UploadResultTable[2] = "人员信息数据错误";
        UploadResultTable[3] = "无法检测脸部";
        UploadResultTable[4] = "人脸特征值提取失败";
        UploadResultTable[5] = "检测到多张脸";
        UploadResultTable[6] = "图像尺寸不符合要求";
        UploadResultTable[7] = "图像解码失败";
        UploadResultTable[8] = "图像拷贝出错";
        UploadResultTable[9] = "没有图像";
        UploadResultTable[10] = "人员信息写入数据库失败";
        UploadResultTable[11] = "图像画质过低";
        UploadResultTable[12] = "人脸相似度太高";
        UploadResultTable[13] = "超过一个注册限制";
        UploadResultTable[14] = "图像格式不符合要求";
        UploadResultTable[15] = "应用程序内部错误";
        UploadResultTable[16] = "重复注册错误";
        UploadResultTable[17] = "人脸被人为是别人";
        UploadResultTable[18] = "人脸注册校验成功";
        UploadResultTable[19] = "人脸注册校验失败";
        UploadResultTable[20] = "Json数据解析出错";
        UploadResultTable[21] = "管理员数量超出最大容量";

        function showUploadStatus() {
            $('#uploadStatus').find('span').remove();
            $('#uploadStatus').append(UploadStatusTable[oAccessDetail.uploadStatus]);
            $('#uploadResult').find('span').remove();
            
            if (oAccessDetail.uploadStatus != 1) {
                $('[name=uploadTime]').val('');
            }
            else {
                $('[name=uploadTime]').val(oAccessDetail.uploadTime);
                if (oAccessDetail.uploadResult > 1) {
                    var iCode = oAccessDetail.uploadResult - 10000;
                    if (iCode == 12 && oAccessDetail.repeatID > 0) {
                        $('#uploadResult').html('<span class="fa fa-exclamation-triangle  label_error">人脸照片和[编号:'
                            + oAccessDetail.repeatID + ']的人员重复</span>');
                    }
                    else {
                        $('#uploadResult').html('<span class="fa fa-exclamation-triangle  label_error">' +
                            UploadResultTable[iCode] + '</span>');
                    }
                    
                }
                
            }
        }
        showUploadStatus();

        function ShowPeopleImage() {
            if (oAccessDetail.employeePhoto.length > 0) {
                $('#peopleImage').find('img').remove();
                $('#peopleImage').append('<img id="showPeopleImg" src="' + oAccessDetail.employeePhoto + '" width="240">');
                bindshowPeopleImgClick();
            }
            else {
                $('#peopleImage').find('img').remove();
                $('#peopleImage').append('<img class="defImageBox" id="showPeopleImg" src="/NoPIC.jpg" width="240">');
            }
        }
        function bindshowPeopleImgClick() {
            $('#showPeopleImg').on('click', function () {
                var idBar = '#showPeopleImg';
                var src = $(idBar)[0].src;
                //debugger;
                var width = $(idBar).width();
                var height = $(idBar).height();
                var scaleWH = width / height;
                var bigH = 800;
                var bigW = scaleWH * bigH;
                if (bigW > 1000) {
                    bigW = 1000;
                    bigH = bigW / scaleWH;
                } // 放大预览图片
                parent.layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 1,
                    shadeClose: true,
                    area: [bigW + 'px', bigH + 'px'], //宽高
                    content: '<img width="' + bigW + '" src="' + src + '" />'
                });
            });
        }
        bindshowPeopleImgClick();




        //提交
        form.on('submit(data-save-btn)', function (data) {
            var post = {};
            var field = data.field;
            //console.log(field);
            post.accessID = oAccessDetail.accessID;
            post.employeeRoot = field.employeeRoot;
            post.timeGroupID = field.timeGroupID;
            post.devicePassTimeOver = field.devicePassTimeOver;
            post.devicePassStart = field.devicePassStart;
            post.devicePassEnd = field.devicePassEnd;
            post.devicePassNumber = $("#devicePassNumber").val();
            debugger
            loadIndex = layer.load(1, { shade: [0.6, '#e2e2e2'] }); //0.1透明度的白色背景
            faceAPI.Ajax({
                type: 'Post',
                data: post,
                url: '/api/DeviceAccess/Update',
                success: function (result) {
                    layer.close(loadIndex);
                    if (result.result == false) {
                        layer.alert(result.error, { icon: 2 });
                    }
                    else {
                        faceAPI.AccessEditPageResult = result;
                        faceAPI.AccessEditPageResult.content = field;

                        layer.close(parentIndex);
                    }
                }
            });

            return false;
        });

    });

</script>
